<script setup lang="ts">
// 在TS项目中，建议作为局部组件主动导入，组件有更好的 TS 类型检查
import { RouterView } from "vue-router";
</script>

<template>
  <!-- 鼠标悬停到组件中有TS类型提示，更安全 -->
  <RouterView />
</template>
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 2 style in Vue 3!',
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message!';
    },
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  created() {
    console.log('Component created');
  },
};
</script>
